<template>
  <div>
    <Row :gutter="24" class="mb-5">
      <Col :span="12">
        <a-button type="primary" @click="batchAdd(model[field])">添加商品属性</a-button>
      </Col>
    </Row>
    <div v-for="(item, index) in model[field]" :key="index">   
      <Row :gutter="24">
        <Col :span="4">
          <FormItem :name="field+'_name'+index" colProps="{ xs: 24, xl: 12, lg: 8, xxl: 6 }" :rules="[{ required: false }]">
              <a-input
                v-model:value="item.name"
                placeholder="例：如产地"
              />
            </FormItem>
        </Col>
        <Col :span="18" class="pl-2">
          <FormItem :name="field+'_value'+index" colProps="{ xs: 24, xl: 12, lg: 8, xxl: 6 }" :rules="[{ required: false }]">
            <a-input
              v-model:value="item.value"
              placeholder="此为填写对应名称的值，如名称填写的是产地，则填写中国等"
            />
          </FormItem>
        </Col>
        <Col :span="2" >
          <a-button danger  @click="() => delAttr(model[field],index)">删除</a-button>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, defineProps, defineEmits } from 'vue';
  import {  Row, Col,FormItem } from 'ant-design-vue';
  import { getDeptList } from '@/api/demo/system';

  defineOptions({ name: 'GoodsAttr' });
  const props = defineProps<{
    field:string,
    model:any
  }>()
  const emit = defineEmits(['select']);

  async function fetch() {
    // treeData.value = (await getDeptList()) as unknown as TreeItem[];
  }

  function batchAdd(item) {
    item.push({ name: '', value: '' });
  }

  function delAttr(item,field: number) {
    item.splice(field, 1);
  }
  
  onMounted(() => {
    fetch();
  });
</script>
